<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>
<div class="main-content">
    <div class="main-content-inner">
        <%@include file="/WEB-INF/common/back/breadcrumb.jsp" %>
        <div class="page-content">
            <form id="addForm" class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right">
                        标题
                        <span style="color: red;">*</span>
                    </label>
                    <div class="col-sm-4">
                        <input type="text" name="title" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right">
                        分类
                        <span style="color: red;">*</span>
                    </label>
                    <div class="col-sm-4">
                        <div class="input-group">
                            <input type="text" id="category" name="category" class="form-control" readonly onclick="showtreeModal('CATEGORY')">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-info btn-white" onclick="showtreeModal('CATEGORY')">
                                    选择
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right">
                        内容
                    </label>
                    <div class="col-sm-6">
                        <textarea name="content" id="content" style="width: 100%;height: 100px;display: none;"></textarea>
                        <div class="wysiwyg-editor" id="editorContent" contenteditable="true"></div>
                    </div>
                </div>
                
                <div class="space-4"></div>

                <div class="clearfix form-actions">
                    <div class="col-md-offset-3 col-md-9">
                        <button class="btn btn-info" type="button" onclick="saveForm()">
                            <i class="ace-icon fa fa-check bigger-110"></i>
                            保存
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<%@include file="/WEB-INF/jsp/back/category/categoryModal.jsp" %>
<script>
    $(function () {
        $('.wysiwyg-editor').ace_wysiwyg({
            contenteditable: true,
            toolbar: [
                'font',
                null,
                'fontSize',
                null,
                {name: 'bold', className: 'btn-info'},
                {name: 'italic', className: 'btn-info'},
                {name: 'strikethrough', className: 'btn-info'},
                {name: 'underline', className: 'btn-info'},
                null,
                {name: 'insertunorderedlist', className: 'btn-success'},
                {name: 'insertorderedlist', className: 'btn-success'},
                {name: 'outdent', className: 'btn-purple'},
                {name: 'indent', className: 'btn-purple'},
                null,
                {name: 'justifyleft', className: 'btn-primary'},
                {name: 'justifycenter', className: 'btn-primary'},
                {name: 'justifyright', className: 'btn-primary'},
                {name: 'justifyfull', className: 'btn-inverse'},
                null,
                {name: 'createLink', className: 'btn-pink'},
                {name: 'unlink', className: 'btn-pink'},
                null,
//                {name: 'insertImage', className: 'btn-success'},
                null,
                'foreColor',
                null,
                {name: 'undo', className: 'btn-grey'},
                {name: 'redo', className: 'btn-grey'}
            ],
            'wysiwyg': {
//                fileUploadError: showErrorAlert
            }
        }).prev().addClass('wysiwyg-style2');
    });
    
    function saveForm() {
        $("#content").val($('#editorContent').html());
        $.ajax({
            type: "POST",
            url: "${contextPath}/back/article/save",
            data: {params: JSON.stringify($("#addForm").serializeObject())},
            async: false,
            success: function (data) {
                if (data.success) {
                    window.location.href = "${contextPath}/back/article/home";
                }
                else {
                    layer.msg(data.msg);
                }
            }
        });
    }
</script>
